import BaseComponent from "../Base/BaseComponent";
import './syle/index.less';
import Base from "../Base";
import {Avatar} from 'antd';
import Icon from "components/Base/Icon";
import PropTypes from "prop-types";

const {Image} = Base;

export default class RightNavBar extends BaseComponent {

  static propTypes = {
    name: PropTypes.string,
  };

  toggleFullScreen() {
    if (
      !document.fullscreenElement &&
      !document.mozFullScreenElement &&
      !document.webkitFullscreenElement &&
      !document.msFullscreenElement
    ) {
      if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
      } else if (document.documentElement.msRequestFullscreen) {
        document.documentElement.msRequestFullscreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      } else if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(
          Element.ALLOW_KEYBOARD_INPUT
        );
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  }

  render() {

    const {name} = this.props;

    return (
      <div className='right-navbar'>
        <Icon className="btn" type="screen-full" onClick={this.toggleFullScreen}/>

        {/*<Avatar src={require('assets/images/avatar.jpg')}/>*/}
        <Icon style={{fontSize:20, color:'white'}} type="user" />
        <span className="admin">{name}</span>

        <a href="#/sign/login" className="exit">退出</a>
      </div>
    );
  }
}
